import React from 'react'
// ===================================================================== Temp
// import Select from '@antd/form/select'
import Table from '#cpt/temp/Table'
import AddEditModal from '#cpt/temp/AddEditModal'
// ===================================================================== Declare
const { $Lazy, $fn, $http } = window
// ===================================================================== Lazy
const $cache 			= $Lazy.file(()=>import('#private/cache-api'))
const TestTable 		= $Lazy.state(()=>import('./test-cpt/test-table'))
const Modal 			= $Lazy.state(()=>import('@antd/modal'))
const Button 			= $Lazy.load(()=>import('@antd/button'))
const SplitDom			= $Lazy.hook(()=>import('../cpt/split-dom'))
// ===================================================================== component
const resultData = [{name: '数值', value: '1'}, {name: '定性', value: '2'}]
class Index extends React.Component{
	state = {
		data: [],
		selectedKeys: [],
		selectedRows: [],
		formData : [
			{ label: '试剂批号',  	name: 'reagent_lot_number', half:true, required:true },
			{ label: '分析物',  		name: 'analyte', 			half:true, required:true, type:'select', idStr: 'code' },
			{ label: '试剂盒', 		name: 'instrument_kit', 	half:true, required:true, type:'select', idStr: 'code' },
			{ label: '试剂类型',  	name: 'reagent_type', 		half:true, required:true, type:'select', idStr: 'code' },
			{ label: '结果类型',  	name: 'result_type', 		half:true, required:true, type:'radio', data: resultData },
			{ label: '方法',  		name: 'method', 			half:true, required:true, type:'select', idStr: 'code' },
			{ label: '单位',			name: 'unit',				half:true, required:true, type:'select', idStr: 'code' },
			{ label: '温度',			name: 'temperature',		half:true, required:true },
			{ label: '设备',			name: 'device_id',			half:true, required:true, type:'select' },
			{ label: '通道号',		name: 'channel_no',			half:true, required:true },
			{ label: '批',			name: 'lot_id',				half:true, required:true, type:'select', idStr: 'id', hide: false },
		]
	}
	
	open = (thisRef) => {
		const { id: uuid, name, type } = thisRef.pRow
		const { formData } = this.state
		if (type === 'group') {
			$fn.hideRows(formData, 'lot_id', false)
			this.submit = {group_id: uuid, type}
		} else if (type === 'device') {
			$fn.hideRows(formData, 'lot_id', false)
			this.submit = {device_id: uuid, type}
		} else {
			$fn.hideRows(formData, 'lot_id', true)
			this.submit = {type, lot_id: uuid}
		}
		this.setState({formData})
		this.modalRef.open()
		this.query = {uuid, type}
		this.name = name
		this.pTableRef.refs.ref.query = {uuid, type}
		this.thisRef = thisRef
		this.fetch()
		this.pTableRef.refs.ref.fetch()
	}
	
	componentDidMount() {
		this.getSelect()
	}
	
	// 获取下拉数据
	getSelect = () => {
		const { formData } = this.state
		$cache.then( async f => {
			// 字典
			const data = await f.getDicCache({ code: [90610, 90600, 90500, 16000, 18000] } )
			const p = await $http.pull(null, 'qc-test/list', {param: {type: 'lot'}})
			const d = await $http.pull(null, 'qc-test/device')
			$fn.setRow(formData, 'analyte',  		data['90610'] )
			$fn.setRow(formData, 'reagent_type',  	data['90600'] )
			$fn.setRow(formData, 'instrument_kit',  data['90500'] )
			$fn.setRow(formData, 'method',  		data['16000'] )
			$fn.setRow(formData, 'unit',  			data['18000'] )
			$fn.setRow(formData, 'lot_id',  		p )
			$fn.setRow(formData, 'device_id',  		d )
			this.setState({ formData })
		})
	}
	
	fetch = () => $fn.fetch.call(this,'qc-test/index', {param: {enabled: 1}} )
	
	// 表单
	cols = [
		{ title: '试剂批号',			dataIndex: 'reagent_lot_number', 	width:100 },
		{ title: '分析物',			dataIndex: 'analyte_name', 			width:100 },
		{ title: '试剂盒', 			dataIndex: 'instrument_kit_name', 	width:200 },
		{ title: '试剂类型', 		dataIndex: 'reagent_type_name', 	width:100 },
		{ title: '结果类型', 		dataIndex: 'result_type', 			width:100,	render: text => $fn.getState(resultData,text) },
		{ title: '方法', 			dataIndex: 'method_name', 			width:100 },
		{ title: '单位', 			dataIndex: 'unit_name', 			width:100 },
		{ title: '温度', 			dataIndex: 'temperature', 			width:100 },
		{ title: '设备', 			dataIndex: 'device_name', 			width:100 },
	]
	
	btns = () => [
		{label: '添加', onClick: () => {
			const { formData } = this.state
			$fn.disabledRows(formData, 'lot_id', false)
			this.setState({formData})
			this.modal?.open({ formRef:this.formRef })},
		},
		{label: '编辑', onClick: () => {
			const { formData } = this.state
			$fn.disabledRows(formData, 'lot_id', true)
			this.setState({ids: {uuid: this.state.selectedKeys[0]}, formData})
			$http.submit(null, 'qc-test/info', { param: {uuid: this.state.selectedKeys[0] } }).then(data => {
				this.formRef?.setValue(data)
				this.modal?.open({ formRef:this.formRef })
			})
		}, disabled: !this.state.selectedRows.length },
		{label: '关闭测试', onClick: () => $http.submit(null, 'qc-test/close', { param: {uuid: this.state.selectedKeys[0]} }).then(() => {
			this.fetch()
			this.pTableRef.refs.ref.fetch()
			$fn.msg.success('关闭测试成功')
		}), disabled: !this.state.selectedRows.length },
		{label: '规则/设置', onClick: () => {
			this.thisRef.ruleModalRef.open(this.state.selectedRows[0])
		}, disabled: !this.state.selectedRows.length }
	]
	
	refreshPage = () => {
		if (this.state.selectedRows.length) {
			this.thisRef.cRow = this.state.selectedRows[0]
			this.thisRef.type = 1
			if(this.thisRef.pageRef.state.index === 1) {
				this.thisRef.pageRef.page1Ref.refs.ref.tableRef.fetch()
			}else{
				this.thisRef.pageRef.setState({index: 1})
			}
		}
		this.thisRef.sideRef.refs.ref.fetch()
		this.thisRef.sideRef.refs.ref.update()
	}
	
	render(){
		const type = this.thisRef?.pRow?.type
		return <>
			<Modal
				title	= '测试'
				width 	= {900}
				height  = '90%'
				noOk
				noText 	= '关闭'
				onRef	= { ref => this.modalRef = ref }
				isFullScroll
				close	= { () => {
					this.refreshPage()
				}}
				btnSuffix = {<Button onClick={() => {
					this.refreshPage()
					this.modalRef.close()
				}} disabled={!this.state.selectedKeys.length} style={{width:100, marginLeft: 25}} size='middle' type='primary'>数据</Button> }
			>
				<div className='h fv p-modal'>
					<div className='mb10'>
						<div className='fxm'>
							<span className='mr10'>{`当前${type === 'lot' ? '批' : type === 'group' ? '测试组' : '仪器'}：`}</span>
							<b>{this.name}</b>
						</div>
					</div>
					<div className='ex fv'>
						<div className='ex fv'>
							<SplitDom label='打开的测试' />
							<div className='ex fx pt5'>
								<div className='ex fx' style={{marginLeft: -10}}>
									{ Table.call(this, { type:1 }) }
								</div>
								<div className='fv'>
									{
										this.btns().map((v,i)=> <Button
												key			= { i } 
												style		= { {minWidth:60} } 
												disabled	= { v.disabled } 
												loading		= { v.loading } 
												label		= { v.label } 
												onClick		= { v.onClick } 
												className	= 'mb10' 
												ghost
											/>
										)
									}
								</div>
							</div>
						</div>
						<div className='ex fv'>
							<SplitDom label='关闭的测试' />
							<TestTable ref={ref => this.pTableRef = ref} refresh={this.fetch} />
						</div>
					</div>
				</div>
			</Modal>
			{/* 添加、编辑 */}
			{ AddEditModal.call(this,{ labelWidth:'s6', width:640, api: 'qc-test/add', editApi: 'qc-test/edit'}) }
		</>
	}
}

export default Index